<script setup lang="ts">
import {ChatDotRound, Pointer} from "@element-plus/icons-vue";
import {onMounted, ref, watch} from "vue";
import {getPostByPostId} from "@/request/api/Posts";
import { useRoute } from 'vue-router';
import router from "@/router";
import {appraiseByPostId, insertAppraise} from "@/request/api/Appraise";
import type {appraise} from "@/request/types/appraise";
import {ElMessage} from "element-plus";
import store from "@/store";


const route = useRoute();
const postId = ref()
const postLists = ref([])

const getPost = () => {
  getPostByPostId(postId.value).then((res:any) => {
    if (res.code === 200) {
      console.log(res.data)
      postLists.value = res.data

    }
  })
}


//评论区
const drawer = ref(false)
const innerDrawer = ref(false)
const appraiseContent = ref([])

const textarea = ref('')

const getAppraise = () => {
  drawer.value = true
  appraiseByPostId(postId.value).then((res: any) => {
    console.log(res)
    appraiseContent.value = res.data
    console.log(appraiseContent.value)
  })
}
let PostForm : appraise = {
  postId: '',
  appraiseContent: ''
}
const publishPost = () => {
  PostForm.postId = postId.value
  PostForm.appraiseContent = textarea.value
  console.log(PostForm)
  insertAppraise(PostForm).then((res: any) => {
    ElMessage.success(res.msg)
    // 清空输入框
    postId.value = ''; // 清空 postId 输入框
    textarea.value = ''; // 清空 textarea 输入框
  })
}

onMounted(() => {
  postId.value = route.query.id
  console.log(postId.value)
  getPost()
})
</script>

<template>
  <div style="width: 700px;background:#FFFFFF;margin: 20px auto 0; overflow:auto;border-radius: 4px;" v-for="item in postLists" :key="item.postId">
    <div style="display: flex;align-items: center; padding: 20px 16px 10px 10px">
      <el-avatar :size="80" style="margin-left: 10px;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      <div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; margin-top: 6px">
        <p style="font-size: 26px">{{item.nickName}}</p>
        <p style="font-size: 18px">{{item.createTime}}</p>
      </div>
    </div>
    <div style="margin-bottom: 10px">
      <h2 style="margin-left: 16px;margin-top: 10px;font-size: 32px; font-weight: 800">#{{item.title}}</h2>
    </div>
    <div class="contentText">
      {{item.content}}
    </div>
    <div style="height:60px;display: flex; justify-content:flex-end;align-items: center; padding-right: 20px;border-top: 1px solid #cccccc">
      <el-icon style="margin-left: 4px" size="20"><Pointer /></el-icon><p style="margin-left: 4px;font-size: 18px">{{item.likeCount}}</p>
      <div @click="getAppraise" style="display: flex;align-items: center">
        <el-icon style="margin-left: 10px" size="20"><ChatDotRound /></el-icon><p style="margin-left: 4px;font-size: 18px">{{item.commentCount}}</p>
      </div>
    </div>
  </div>

  <el-drawer v-model="drawer" title="评论" size="40%">
    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
      <div style="display: flex;justify-content: center;align-items: flex-start">
        <el-avatar style="margin-right: 10px" :size="70" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
        <div>
          <el-input
              v-model="textarea"
              :resize="'none'"
              style="width: 470px"
              :rows="6"
              show-word-limit
              maxlength="1000"
              type="textarea"
              placeholder="欢迎高质量评论！！！"
          />
          <div style="display: flex;justify-content: flex-end;margin-top: 8px;width: 460px;background: ">
            <el-button @click="publishPost" type="primary" round>评论</el-button>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in appraiseContent" :key="index" style="width: 550px;background: #FFFFFF;border-radius: 4px; border: 1px solid #cccccc;margin-top: 20px">
        <div style="display: flex;align-items: center; padding: 20px 16px 10px 10px">
          <el-avatar :size="50" style="margin-left: 10px;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; margin-top: 6px">
            <p style="font-size: 16px">{{ item.nickName }}</p>
            <p style="font-size: 12px">{{item.createTime}}</p>
          </div>
        </div>
        <div style="width: 500px;margin-left: 25px;margin-top:10px;">
          <el-text line-clamp="2">
            {{item.appraiseContent}}
          </el-text>
        </div>
        <div style="height:40px;display: flex; justify-content:flex-end;align-items: center; padding-right: 20px;margin-top:10px;border-top: 1px solid #cccccc">
          <el-icon style="margin-left: 4px" size="14"><Pointer /></el-icon><el-text>{{ item.likeCount }}</el-text>
          <div @click="innerDrawer = true" style="display: flex;align-items: center">
            <el-icon style="margin-left: 10px" size="14"><ChatDotRound /></el-icon><el-text>{{ item.commentCount }}</el-text>
          </div>
        </div>
      </div>
<!--      <el-drawer-->
<!--          v-model="innerDrawer"-->
<!--          title="回复"-->
<!--          :append-to-body="true"-->
<!--      >-->
<!--        <div>-->
<!--          <div style="display: flex;justify-content: center;align-items: flex-start">-->
<!--            <el-avatar style="margin-right: 10px" :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>-->
<!--            <div>-->
<!--              <el-input-->
<!--                  v-model="textarea"-->
<!--                  :resize="'none'"-->
<!--                  style="width: 370px"-->
<!--                  :rows="6"-->
<!--                  show-word-limit-->
<!--                  maxlength="1000"-->
<!--                  type="textarea"-->
<!--                  placeholder="尽情回复_(:зゝ∠)_！！！"-->
<!--              />-->
<!--              <div style="display: flex;justify-content: flex-end;margin-top: 8px;width: 370px;background: ">-->
<!--                <el-button type="primary" round>回复评论</el-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div  style="width: 410px;background: #FFFFFF;border-radius: 4px; border: 1px solid #cccccc;margin-top: 20px">-->
<!--            <div style="display: flex;align-items: center; padding: 20px 16px 10px 10px">-->
<!--              <el-avatar :size="30" style="margin-left: 10px;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>-->
<!--              <div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; margin-top: 6px">-->
<!--                <p style="font-size: 14px">我爱吃草莓</p>-->
<!--                <p style="font-size: 10px">2025/6/22</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div style="width: 500px;margin-left: 25px;margin-top:5px;">-->
<!--              <el-text line-clamp="2">-->
<!--                The -webkit-line-clamp CSS property<br />-->
<!--                allows limiting of the contents of<br />-->
<!--                a block to the specified number of lines.-->
<!--              </el-text>-->
<!--            </div>-->
<!--            <div style="height:30px;display: flex; justify-content:flex-end;align-items: center; padding-right: 20px;margin-top:10px;border-top: 1px solid #cccccc">-->
<!--              <el-icon style="margin-left: 4px" size="12"><Pointer /></el-icon><el-text>1111111</el-text>-->
<!--              <div @click="innerDrawer = true" style="display: flex;align-items: center">-->
<!--                <el-icon style="margin-left: 10px" size="12"><ChatDotRound /></el-icon><el-text>12312312</el-text>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-drawer>-->
    </div>
  </el-drawer>
</template>

<style scoped>
.contentText{
  width: 680px;
  margin-left: 20px;
  font-size: 22px;
  margin-bottom: 20px;
}
.appraiserContent{
  font-size: 18px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>